<template>
    <!--课程购买页-->
    <div class="contain">
        <div class="product-header">
            <div class="product-top-opt"></div>
            <div class="product-intro-name">{{product.name}}</div>
            <div class="producy-intro-msg">
                {{product.good_desc}}
            </div>
            <!--悬浮价格条-->
            <div class="product-intro-float">
                <div class="intro-main">
                    <div class="product-price-box">
                        <div class="price-box">
                            <div class="origin-price">
                                ￥{{product.one_price | fixNumber}}
                                <span class="pre">/{{youxiaoqi}}</span>
                            </div>
                            <div class="underline-price">￥{{product.deadline_price | fixNumber}}</div>
                        </div>
                        <div class="float-tags">
                            <span class="tag" v-if="product.tag1">{{product.tag1}}</span>
                            <span class="tag" v-if="product.tag2">{{product.tag2}}</span>
                            <span class="tag" v-if="product.tag3">{{product.tag3}}</span>
                        </div>
                    </div>
                    <div class="product-course-detail">
                        课时：<span></span>
                    </div>
                    <div class="product-tags-box">
                        <span class="tag" v-if="product.tese1">{{product.tese1}}</span>
                        <span class="tag" v-if="product.tese2">{{product.tese2}}</span>
                        <span class="tag" v-if="product.tese3">{{product.tese3}}</span>
                    </div>
                </div>
                <div class="intro-right">
                    <div class="btn product-buy" @click="addBuyCarAndPay(product.id)">立即购买</div>
                    <div class="btn product-addcar" @click="addBuyCar">加入购物车</div>
                </div>
            </div>
            <!--产品参数-->
            <div class="product-fold-detail">
                <div class="product-fold-title">
                    <div class="fold-title-left">
                        <span>商品参数</span>
                        <span class="count-tip">3</span>
                    </div>
                    <div class="fold-title-right" @click="changeFoldStatus">
                        下拉查看详情<i class="arrow"></i>
                    </div>
                </div>
                <ul class="product-fold-box" v-show="foldStatus">
                    <li class="fold-intro">
                        <span>1</span>
                        <p>精品课程：{{product.jpkname}}</p>
                    </li>
                    <li class="fold-intro">
                        <span>2</span>
                        <p>在线直播：{{product.zxzb}}</p>
                    </li>
                    <li class="fold-intro">
                        <span>3</span>
                        <p>精编教程：{{product.jbjc}}</p>
                    </li>
                </ul>
            </div>
            <!--切换tab-->
            <div class="tabbar-box">
                <ul class="tabbar">
                    <li :class="{active: tabIndex===1}" @click="changeTabTo(1)">商品详情</li>
                    <li :class="{active: tabIndex===2}" @click="changeTabTo(2)">商品目录</li>
                </ul>
            </div>
            <!--图片介绍-->
            <div class="img-wrap product-detail" v-show="tabIndex===1">
                <img :src="product.good_pic1" alt=""/>
                <img :src="product.good_pic2" alt=""/>
                <img :src="product.good_pic3" alt=""/>
                <img :src="product.good_pic4" alt=""/>
                <img :src="product.good_pic5" alt=""/>
            </div>
            <!--目录-->
            <div class="img-wrap product-item" v-show="tabIndex===2">
                <img :src="product.fengmian_pic_url" alt=""/>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'landingPage',
    components: {
        /**/
    },
    data() {
        return {
            productId: '',
            product: {},
            foldStatus: false,
            tabIndex: 1,
        };
    },
    computed:{
        youxiaoqi() {
            let val = ''
            switch (this.product.youxiaoqi) {
                case 0: val = '永久';
                    break;
                case 1: val = '1年';
                    break;
                case 2: val = '2年';
                    break;
                case 3: val = '3年';
                    break;
                case 4: val = '4年';
                    break;
                default: val = '永久';
                    break;
            }
            return val
        }
    },
    watch: {

    },
    mounted() {
        if(this.$util.authLogin()) {
            this.initPage();
        }
    },
    methods: {
        initPage() {
            this.productId = this.$route.query.id;
            this.ajaxGetGoodDetail(this.productId)
        },
        // 查询产品详情
        ajaxGetGoodDetail(id) {
            this.$api.ajaxData({
                pathName: 'doGetGoodsById',
                authorization: true,
                params: {
                    goodsid: id
                }
            })
                .then(res => {
                    if(res.obj && res.obj.length > 0)
                    this.product = res.obj[0];
                })
                .catch(() => {
                    this.product = {};
                });
        },
        // 切换折叠
        changeFoldStatus()  {
            this.foldStatus = !this.foldStatus
        },
        // 切换tab
        changeTabTo(index) {
            this.tabIndex = index
        },
        addBuyCarAndPay(id) {
            this.$router.push({ name: 'ordering', query: {
                gid: id
            }});
        },
        // 加入购物车
        addBuyCar() {
            return this.$api.ajaxData({
                pathName: 'doAddShopCar',
                authorization: true,
                params: {
                    st_id: this.$api.getAccount().id,
                    good_id: this.productId,
                    good_num: 1
                }
            })
                .then(res => {
                    this.$util.alert(res.msg)
                })
                .catch(() => {

                });
        }
    }
};
</script>
<style scoped lang="scss">
.contain {
    .product-header {
        height: 322px;
        padding: 80px 0 0;
        color: #fff;
        &:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100vw;
            height: 400px;
            background: url('../../assets/image/back/u542.jpg') no-repeat;
            background-size: 100% 100%;
        }
        .product-top-opt {
            position: absolute;
            top: 0;
            right: 0;
        }
        .product-intro-name {
            position: relative;
            margin-bottom: 20px;
            font-size: 48px;
            text-align: center;
        }
        .producy-intro-msg {
            position: relative;
            height: 80px;
            font-size: 14px;
            text-align: justify;
        }
        .product-intro-float {
            position: relative;
            display: flex;
            padding: 20px;
            margin-bottom: 15px;
            border-radius: 6px;
            font-size: 13px;
            color: #333333;
            background: #fff;
            box-shadow: 0 0 10px rgba(165, 160, 160, 0.5);
            .intro-main {
                flex: 1;
                .product-price-box {
                    display: flex;
                    margin-bottom: 10px;
                    .price-box {
                        padding-right: 20px;
                        color: #333;
                        .origin-price {
                            font-size: 28px;
                            color: #FF6A00;
                            font-weight: bold;
                            .pre {
                                font-size: 16px;
                                color: #666666;
                            }
                        }
                        .underline-price {
                            font-size: 16px;
                            color: #999999;
                            text-decoration: line-through;
                        }
                    }
                    .float-tags {
                        display: flex;
                        padding: 5px 0 0;
                        .tag {
                            padding: 0 15px;
                            margin-right: 20px;
                            height: 30px;
                            line-height: 30px;
                            border-radius: 15px;
                            font-size: 16px;
                            background: #0079fe;
                            color: #fff;
                        }
                    }
                }
                .product-course-detail {
                    margin-bottom: 10px;
                    font-style: normal;
                    font-size: 16px;
                    color: #999999;
                }
                .product-tags-box {
                    .tag {
                        margin-right: 8px;
                        font-size: 14px;
                        color: #666666;
                        vertical-align: middle;
                        &:before {
                            content: '';
                            display: inline-block;
                            width: 20px;
                            height: 20px;
                            margin-right: 8px;
                            background: url("../../assets/image/icon/u174.png") no-repeat;
                            background-size: contain;
                            vertical-align: bottom;
                        }
                    }
                }
            }
            .intro-right {
                display: flex;
                width: 280px;
                align-items: center;
                justify-content: space-between;
                .btn {
                    width: 126px;
                    height: 40px;
                    line-height: 40px;
                    border-radius: 20px;
                    font-size: 14px;
                    font-weight: bold;
                    text-align: center;
                    cursor: pointer;
                    &.product-buy {
                        background: #ff6666;
                        color: #eee;
                    }
                    &.product-addcar {
                        border: 1px solid #e7e7e7;
                        color: #ff6666;
                    }
                }
            }
        }
        .product-fold-detail {
            position: relative;
            border-radius: 6px;
            font-size: 14px;
            color: #333;
            background: #fff;
            border: 1px solid #f4f4f4;
            box-sizing: border-box;
            .product-fold-title {
                position: relative;
                display: flex;
                width: 100%;
                padding: 20px 30px;
                line-height: 40px;
                align-items: center;
                justify-content: space-between;
                font-size: 14px;
                color: #666;
                box-sizing: border-box;
                .fold-title-left {
                    position: relative;
                    font-size: 18px;
                    .count-tip {
                        position: absolute;
                        left: 50%;
                        top: -18px;
                        height: 20px;
                        padding: 0 25px;
                        line-height: 22px;
                        border-radius: 11px;
                        color: #fff;
                        background: #ff6666;
                        font-size: 13px;
                        text-align: center;
                        &:after {
                            content: '';
                            display: block;
                            position: absolute;
                            left: 8px;
                            top: 20px;
                            width: 0;
                            height: 0;
                            border-left: 6px solid #fff;
                            border-right: 6px solid #fff;
                            border-top: 8px solid #ff6666;
                            border-bottom-width: 0;
                            background: #ff6666;
                        }
                    }
                }
                .fold-title-right {
                    cursor: pointer;
                    .arrow {
                        position: relative;
                        top: -2px;
                        margin-left: 10px;
                        display: inline-block;
                        width: 10px;
                        height: 10px;
                        border-right: 1px solid #666;
                        border-bottom: 1px solid #666;
                        transform: rotate(45deg);
                    }
                }
            }
            .product-fold-box {
                border-top: 1px solid #f7f7f7;
                .fold-intro {
                    display: flex;
                    padding: 10px;
                    line-height: 27px;
                    align-items: flex-start;
                    font-size: 14px;
                    color: #333;
                    span {
                        flex-shrink: 0;
                        display: block;
                        width: 27px;
                        height: 27px;
                        margin-right: 15px;
                        border-radius: 50%;
                        font-size: 13px;
                        font-weight: bold;
                        text-align: center;
                        color: #fff;
                        background: #ccc;
                    }
                }
            }
        }
        .tabbar-box {
            position: relative;
            border-bottom: 1px solid #f4f4f4;
            font-size: 18px;
            color: #999;
            background: #fff;
            .tabbar {
                display: flex;
                height: 60px;
                align-items: center;
                justify-content: space-around;
                li {
                    position: relative;
                    line-height: 42px;
                    cursor: pointer;
                    &.active {
                        font-weight: bold;
                        color: #0079FE;
                        &:after {
                            content: '';
                            position: absolute;
                            left: 50%;
                            bottom: 0;
                            display: block;
                            width: 34px;
                            height: 4px;
                            border-radius: 2px;
                            background: #0079FE;
                            transform: translate(-50%,0);
                        }
                    }
                }
            }
        }
        .img-wrap {
            font-size: 0;
            img {
                display: block;
                width: 100%;
                border: none;
            }
        }
    }
}
</style>
